<template>
    <view class="container">
        <u-sticky bgColor="#ffffff" :customNavHeight="0" :offsetTop="0" style="top: 0">
            <u-tabs
                activeStyle="color:#ea4679;fontWeight:bold;"
                @change="tabsChange"
                :current="tabsCurrent"
                lineColor="#ea4679"
                :list="tabs"
                :scrollable="false"
            ></u-tabs>
        </u-sticky>
        <view class="data-list">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="left">
                    <view class="desc">{{ item.desc }}</view>
                    <view class="time">{{ item.create_time }}</view>
                </view>
                <view class="right-plus" v-if="item.num >= 0">{{ '+' + item.num }}</view>
                <view class="right-minus" v-else>{{ item.num }}</view>
            </view>
        </view>
        <view style="margin-top: 60rpx;">
          <u-empty icon="/static/ic_empty_list.png" v-if="isEmpty"></u-empty>
          <u-loadmore
              @loadmore="listLoadMore"
              marginTop="40rpx"
              :status="status"
              v-if="!isEmpty"
          ></u-loadmore>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 30,
      status: '',
      isEmpty: true,
      list: [],
      tabs: [
        {
          name: '算力',
          type: 'balance'
        },
        {
          name: '形象克隆点',
          type: 'body'
        },
        {
          name: '声音克隆点',
          type: 'voice'
        }
      ],
      tabsCurrent: 0
    };
  },
  computed: {
    currentType() {
      return this.tabs[this.tabsCurrent].type;
    }
  },
  onPullDownRefresh() {
    this.list = [];
    this.getList(1);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onLoad(option) {
    if (option.type) {
      this.tabs.forEach((item, index) => {
        if (item.type === option.type) {
          this.tabsCurrent = index
        }
      })
    }
    this.status = 'loading';
    this.getList(1);
  },
  methods: {
    tabsChange(e) {
      this.tabsCurrent = e.index
      this.getList(1)
    },
    getList(isRefresh = 0) {
      this.isEmpty = false;
      this.status = 'loading';
      if (isRefresh) {
        this.page = 1
        this.list = []
      }
      this.$util.request({
        url: '/user/getBalanceLogs',
        data: {
          type: this.currentType,
          page: this.page,
          limit: this.limit
        },
        loading: false
      }).then(res => {
        this.list = this.list.concat(res.data.list)
        this.total = res.data.total;
        this.isEmpty = (this.list.length === 0);
        this.status = this.list.length < res.data.total ? 'loadmore' : 'nomore';
      })
    },
    listLoadMore() {
      this.page += 1;
      this.getList();
    },
  }
}
</script>
<style scoped>
@import './logs.css';
</style>
